<template>
    <div class="nav">
    <div class="nav-top">
      <dl @click="ershou()">
        <dt>
          <span class="iconfont icon-fang1"></span>
        </dt>
        <dd>二手房</dd>
      </dl>
      <dl>
        <dt>
          <span class="iconfont icon-fang"></span>
        </dt>
        <dd>新房</dd>
      </dl>
      <dl @click="zu()">
        <dt>
          <span class="iconfont icon-xiaoqu"></span>
        </dt>
        <dd>租房</dd>
      </dl>
      <dl>
        <dt>
          <span class="iconfont icon-haiwai"></span>
        </dt>
        <dd>海外</dd>
      </dl>
      <dl @click="boss()">
        <dt>
          <span class="iconfont icon-shafaxuanzhong-"></span>
        </dt>
        <dd>装修</dd>
      </dl>
    </div>
  </div>
</template>

<script>
export default {
    methods:{
      // 点击去装修
      boss(){
    this.$router.push("/boss")
  },
        // 点击跳转到二手房
      ershou(){
        this.$router.push("./ershou")
      },
      zu(){
         this.$router.push("./zu")
      }
      
    }
}
</script>

<style scoped>
.nav-top{
  display: flex;
  justify-content: space-evenly;
  text-align: center;
}
.nav-top dt{
  width: 0.55rem;
  height: 0.38rem;
  background: chartreuse;
  line-height: 0.38rem;
  border-radius: 0.2rem;
  color: white;
}
.nav-top dl:nth-of-type(1) dt{
    background-color: #54d5bb;
}
.nav-top dl:nth-of-type(2) dt{
    background-color: #fe8184;
}
.nav-top dl:nth-of-type(3) dt{
    background-color: #fad472;
}
.nav-top dl:nth-of-type(4) dt{
    background-color: #ff9877;
}
.nav-top dl:nth-of-type(5) dt{
    background-color: #76a1f9;
}
.nav-top span{
  font-size: 0.23rem;
}
.nav-top dd{
  font-size: 0.13rem;
  font-weight: bold;
  margin-top: 0.1rem;
}
</style>